<template>
  <div class="iframe">
    <div class="i-title">
      <h3>toRef与toRefs</h3>
    </div>
    <div class="i-tip">对象值：{{ obj.name }}</div>
    <div class="i-tip">对象值：{{ obj.age }}</div>
    <div class="i-tip">单个值：{{ name }}</div>
    <div class="i-tip">单个值：{{ age }}</div>
    <div class="i-tip">
      <el-button @click="updateObj">修改</el-button>
    </div>
  </div>
</template>

<script setup>
import { reactive,toRefs,toRef } from "vue";
// 作用是：在不丢失响应式的前提下，对响应式对象数据进行解构
const obj = reactive({
  name: "陶国荣",
  age: 18
});

// 单个响应
// const name = toRef(obj, "name");
// const age = toRef(obj, "age");

// 多个响应
const { name,age } = toRefs(obj);
const updateObj = () => {
  obj.name = "tgrong";
  obj.age = 28;
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
